<template>
	<view class="index-goods">
		<!-- 列表平铺两列三列 -->
		<view class='img-grids bottom-cell-group'>
			<!-- 专区分类 -->
			<!-- <view class='cell-item right-img'>
				<view class='cell-item-hd'>
					<view class="square"></view>
					<view class='cell-hd-title'>分期专区</view>
				</view>
				<view class='cell-item-bd'>
				</view>
				<view class='cell-item-ft'>
					<text class='cell-ft-text' @click="goodsList">查看更多</text>
					<image class='cell-ft-next icon' src='/static/image/right.png'></image>
				</view>
			</view> -->

			<!-- 分期专区的商品列表 -->
			<!-- <view class="installment-zone">
					<view class="img-grids-item" @click="goodsDetail()">
						<image class="img-grids-item-t have-none" mode='aspectFill' src="http://demo.jihainet.com/static/uploads/images/6c/0b/33/5cc10de3cd32f.jpg"></image>
						<view class="img-grids-item-b">
							<view class="goods-name grids-goods-name">
								得力中性笔按动批发黑色水笔红笔签字笔0.5中性笔办公用品文具笔 学生用水笔
							</view>
							<view class="goods-deadline">
								<view class="deadline">
									<view class="qi">期</view>
									<view class ="date-line">7天期限</view>
								</view>
								<view class="everyDay">每天仅供￥34.3</view>
							</view>
							<view class="goods-item-c">
								<view class="price">
									<view class="rm">￥</view>
									<view class="goods-price red-price">0.01</view>
								</view>
								<view class="mon-sales">月销555笔</view>
							</view>
						</view>
					</view>
				</view> -->
			<view class="installment-zone" v-for="(goodsItemList, index) in jdata" :key="index">
				<view class="img-grids-item">
					<image class="img-grids-item-t have-none" mode='aspectFill' :src="goodsItemList.productImage"></image>
					<view class="img-grids-item-b">
						<view class="goods-name grids-goods-name">
							{{goodsItemList.productName}}
						</view>
						<view class="purchase-details">
							<view class="purchase">
								<view class="text">新款</view>
								<view class="draw">距离开奖 24:23:10</view>
							</view>
							<view class="phased">
								<view class="phased-one">￥</view>
								<view class="phased-two">4</view>
								<view class="phased-three">分期值</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- end -->
		</view>
		<!-- 抢购专区 -->
		<view class='img-grids bottom-cell-groups'>
			<!-- <view class='cell-item right-img'>
				<view class='cell-item-hd'>
					<view class="square" style="background-color:#F75F12"></view>
					<view class='cell-hd-title'>抢购专区</view>
				</view>
				<view class='cell-item-bd'>
				</view>
				<view class='cell-item-ft'>
					<text class='cell-ft-text' @click="goodsList()">查看更多</text>
					<image class='cell-ft-next icon' src='/static/image/right.png'></image>
				</view>
			</view> -->

			<!-- 抢购专区的商品列表 -->
			<!-- <view class="installment-zone">
					<view class="img-grids-item">
						<image
							class="img-grids-item-t have-none"
							mode='aspectFill' src="http://demo.jihainet.com/static/uploads/images/6c/0b/33/5cc10de3cd32f.jpg"
						></image>
						<view class="img-grids-item-b">
							<view class="goods-name grids-goods-name">
								得力中性笔按动批发黑色水笔红笔签字笔0.5中性笔办公用品文具笔 学生用水笔
							</view>
							<view class="purchase-details">
								<view class="purchase">
									<view class="text">抢购中</view>
									<view class ="draw">距离开奖 24:23:10</view>
								</view>
								<view class="phased">
									<view class="phased-one">￥</view>
									<view class="phased-two">4</view>
									<view class="phased-three">分期值</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			<!-- end -->
		</view>

		<!-- 限时购买 -->
		<!-- <view class='img-grids bottom-cell-groups top-height'>
			<view class='cell-item right-img'>
				<view class='cell-item-hd'>
					<view class="square" style="background-color:#12AE97"></view>
					<view class='cell-hd-title'>限时购买</view>
				</view>
				<view class='cell-item-bd'>
				</view>
				<view class='cell-item-ft'>
					<text class='cell-ft-text' @click="goodsList">查看更多</text>
					<image class='cell-ft-next icon' src='/static/image/right.png'></image>
				</view>
			</view>
			 -->
		<!-- 限时转卖 -->
		<!-- <view class="time-to-buy">
					<view class="title">
						南城美丽佳人美发店
					</view>
					<view class="time-buy">
						<view class="buy-one">限时转卖</view>
						<view class="buy-two">
							<view class="rm">￥</view>
							<view>1888</view>
						</view>
						<view class="buy-three">原价￥1988</view>
					</view>
					<image src="/static/home/fenqi/Bitmap4.png"></image>
				</view> -->
		<!-- end -->
	</view>
	</view>
</template>

<script>
	import {
		goods
	} from '@/config/mixins.js'
	import datas from '@/common/data.js';
	export default {
		data() {
			return {

			}
		},
		filters: {
			substr(val) {
				if (val.length == 0 || val == undefined) {
					return false;
				} else if (val.length > 13) {
					return val.substring(0, 13) + "...";
				} else {
					return val;
				}
			}
		},
		mixins: [goods],
		name: "jshopgoods",
		props: {
			jdata:{
				type: Array,
				required: true,
				default(){
					return []
				}
			}
		},
		computed: {

		},
		onLoad() {
		},

		methods: {

			//跳转到分期商品详情页面
			goodsDetail: function(id) {
				let url = '/pages/goods/index/index?id=' + id;
				this.$common.navigateTo(url);
			},
			// 跳到抢购商品详情页
			rushGoodsDetail: function(id) {
				let url = '/pages/goods/index/rushshop?id=' + id;
				this.$common.navigateTo(url);
			},

		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	// 分期专区
	.index-goods {
		margin-top: -45rpx;
		margin-bottom: 20rpx;

		.bottom-cell-group {
			// border:1px solid red;
		}

		.bottom-cell-groups {
			margin-top: -30rpx;
			// margin-bottom:-24rpx;
		}

		.top-height {
			margin-top: 0rpx;
		}
	}

	.index-goods .img-grids-item {
		// border:1px solid green;
		border-radius: 16rpx;
		padding-bottom: 10rpx;
		display: inline-block;
		margin-top: 0;
		margin-bottom: 96rpx;
	}

	.installment-zone {
		.img-grids-item-b {
			padding-bottom: 20rpx;
			border-radius: 0 0 16rpx 16rpx;
			// border:1px solid red;
			background-color: #FFFFFF;

			.goods-name {
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				padding-right: 10rpx;
				padding-left: 10rpx;
			}

			.goods-item-c {
				background-color: #FFFFFF;
				display: flex;
				justify-content: space-between;
				padding-right: 20rpx;
				padding-left: 10rpx;
				margin-top: 24rpx;

				.price {
					display: flex;

					.rm {
						font-size: 26rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(255, 94, 77, 1);
						line-height: 66rpx;
					}

					.goods-price {
						font-size: 40rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(255, 94, 77, 1);
						line-height: 56rpx;
					}
				}

				.mon-sales {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(179, 179, 179, 1);
					line-height: 64rpx;
				}

			}

			.goods-deadline {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				padding-right: 20rpx;
				padding-left: 10rpx;

				.everyDay {
					font-size: 20rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(247, 181, 0, 1);
					line-height: 28rpx;
				}

				.deadline {
					display: flex;
					justify-content: space-between;
					padding-right: 8rpx;
					width: 120rpx;
					height: 30rpx;
					font-size: 20rpx;
					border: 1px solid rgba(91, 76, 255, 1);
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(91, 76, 255, 1);
					line-height: 28rpx;

					.qi {
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						background-color: rgba(91, 76, 255, 1);
						padding: 0 6rpx 4rpx 2rpx;
					}

					.date-line {
						// margin-left:5rpx;
					}
				}
			}

			.purchase-details {
				.purchase {
					margin-top: 12rpx;
					display: flex;
					justify-content: space-between;
					padding-right: 20rpx;
					padding-left: 10rpx;

					.text {
						width: 77rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						background: rgba(255, 94, 77, 1);
						border-radius: 16rpx;
						font-size: 20rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}

					.draw {
						width: 194rpx;
						height: 48rpx;
						text-align: center;
						background: rgba(255, 94, 77, 0.15);
						border-radius: 16rpx;
						line-height: 48rpx;
						font-size: 20rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(255, 94, 77, 1);
					}
				}

				.phased {
					display: flex;
					margin-top: 11rpx;
					// padding-bottom:20rpx;
					color: rgba(255, 94, 77, 1);

					.phased-one {
						line-height: 64rpx;
						font-size: 26rpx;
						margin-right: 6rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
					}

					.phased-two {
						font-size: 40rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(255, 94, 77, 1);
						// line-height:56px;
					}

					.phased-three {
						line-height: 64rpx;
						margin-left: 6rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(255, 94, 77, 1);
						// line-height:37px;
					}
				}
			}
		}

	}

	.time-to-buy {
		width: 686rpx;
		margin: auto;
		// height:440px;
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			// line-height:45rpx;
			padding: 32rpx 0 0 32rpx;
		}

		.time-buy {
			display: flex;
			// margin-top:5rpx;
			padding: 18rpx 36rpx 32rpx;

			.buy-one {
				background: rgba(91, 76, 255, 1);
				border-radius: 4rpx;
				// width:89rpx;
				height: 30rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				padding: 2rpx 4rpx 2rpx 4rpx;
				// line-height:30rpx;

			}

			.buy-two {
				display: flex;
				margin-left: 8rpx;
				line-height: 10rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgba(255, 94, 77, 1);

				view {
					line-height: 30rpx;
				}

				.rm {
					margin-right: -8rpx
				}
			}

			.buy-three {
				margin-left: 8rpx;
				font-size: 23rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				line-height: 32rpx;
			}
		}

		image {
			width: 100%;
			height: 280rpx;
		}
	}

	.cell-item {
		background-color: #f5f5f5;
		border: none;
		padding: 36rpx 0 42rpx 0;

		.cell-item-hd {
			.square {
				width: 12rpx;
				height: 33rpx;
				background: rgba(43, 95, 210, 1);
				border-radius: 16px;

			}

			.cell-hd-title {

				margin-left: 9rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);

			}
		}

	}

	.cell-ft-text {
		font-size: 26rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.img-grids,
	.img-list {
		/* margin-top: 20upx; */
		// background-color: #fff;
	}

	.img-grids-item {
		display: inline-table;
		margin-top: 0;
		margin-bottom: 14upx;
	}

	.column3 .img-grids-item {
		width: 230upx;
		height: 364rpx !important;
		margin: 15upx;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 6upx;
	}

	.column3 .img-grids-item:nth-child(3n) {
		margin-right: 15upx;
	}

	.column3 .img-grids-item-t {
		width: 230upx;
		height: 230upx;
	}

	.column3 .grids-goods-name {
		font-size: 24upx;
	}

	.column3 .img-grids-item-b {
		// color:red;
		padding: 0 8upx 8upx;
	}

	.column3 .goods-price {
		font-size: 26upx;
	}

	.slide3 .img-grids-item {
		width: 200upx;
	}

	.slide3 .img-grids-item-t {
		width: 200upx;
		height: 200upx;
	}

	.slide3 .grids-goods-name {
		font-size: 24rpx;
		height: 66rpx;
	}

	.index-goods .img-list-item {
		padding: 0upx 26upx;
		margin-bottom: 14upx;
	}

	.index-goods .img-list {
		padding-bottom: 10upx;
	}
</style>
